// spider-web.js

export function initSpiderWeb() {
  // 获取元素属性的工具函数，若属性不存在则返回默认值
  function n(n,e,t) {
    return n.getAttribute(e)||t;
  }

  // 获取指定标签名的所有 DOM 元素
  function e(n) {
    return document.getElementsByTagName(n);
  }

  // 获取当前 script 标签的一些配置参数
  function t() {
    var t=e("script"),
      o=t.length,
      i=t[o-1]; // 获取最后一个 <script> 标签
    return {
      l: o, // script 标签的数量
      z: n(i,"zIndex",-1), // 获取 z-index 属性，默认 -1
      o: n(i,"opacity",0.5), // 获取 opacity 属性，默认 0.5
      // c: n(i,"color","100,0,0"), // 获取 color 属性，默认 "0,0,0"（黑色）
      c: n(i,"color","0,255,255"), // 设置为青绿色
      n: n(i,"count",99), // 获取 count 属性，默认 99（表示小圆点数量）
    };
  }

  // 更新画布的宽度和高度
  function o() {
    a=m.width=window.innerWidth||document.documentElement.clientWidth||document.body.clientWidth;
    c=m.height=window.innerHeight||document.documentElement.clientHeight||document.body.clientHeight;
  }

  // 动画绘制函数
  function i() {
    r.clearRect(0,0,a,c); // 清空画布
    var n,e,t,o,m,l;
    s.forEach(function(i,x) {
      // 更新每个点的位置
      for(i.x+=i.xa,i.y+=i.ya,i.xa*=i.x>a||i.x<0? -1:1,i.ya*=i.y>c||i.y<0? -1:1,r.fillRect(i.x-0.5,i.y-0.5,1,1),e=x+1;e<u.length;e++) {
        n=u[e];
        if(n!==null&&n.x!==null&&n.y!==null) {
          o=i.x-n.x;
          m=i.y-n.y; // 计算两点之间的距离
          l=o*o+m*m; // 计算平方和（距离的平方）
          if(l<n.max) { // 如果距离小于最大距离，连接这两个点
            if(n===y&&l>=n.max/2) {
              i.x-=0.03*o;
              i.y-=0.03*m; // 如果是鼠标的位置，调整点的偏移
            }
            t=(n.max-l)/n.max; // 计算透明度
            r.beginPath();
            r.lineWidth=t/2; // 设置线条宽度
            // r.strokeStyle="rgba("+d.c+","+(t+0.2)+")"; // 设置线条颜色和透明度
            r.strokeStyle="rgba("+d.c+","+(t+0.2)+")"; // 这里的d.c是"0,255,255"，即青绿色
            r.moveTo(i.x,i.y); // 线段起点
            r.lineTo(n.x,n.y); // 线段终点
            r.stroke(); // 绘制线条
          }
        }
      }
    });
    x(i); // 递归调用，持续更新动画
  }

  var a,c,u,m=document.createElement("canvas"),
    d=t(),
    l="c_n"+d.l,
    r=m.getContext("2d"),
    x=window.requestAnimationFrame||window.webkitRequestAnimationFrame||window.mozRequestAnimationFrame||window.oRequestAnimationFrame||window.msRequestAnimationFrame||function(n) {
      window.setTimeout(n,1000/45); // 如果不支持 requestAnimationFrame，使用 setTimeout
    },
    w=Math.random,
    y={ x: null,y: null,max: 20000 }; // y 记录鼠标的位置以及最大距离

  m.id=l;
  m.style.cssText="position:fixed;top:0;left:0;z-index:"+d.z+";opacity:"+d.o; // 设置 canvas 的样式
  e("body")[0].appendChild(m); // 将 canvas 添加到页面中
  o(); // 初始化画布的宽高
  window.onresize=o; // 监听窗口大小变化，重新设置画布大小
  window.onmousemove=function(n) { // 监听鼠标移动事件
    n=n||window.event;
    y.x=n.clientX; // 更新鼠标 x 坐标
    y.y=n.clientY; // 更新鼠标 y 坐标
  };
  window.onmouseout=function() { // 鼠标移出窗口时，清空鼠标位置
    y.x=null;
    y.y=null;
  };

  // 随机生成一些点
  for(var s=[],f=0;d.n>f;f++) {
    var h=w()*a,
      g=w()*c,
      v=2*w()-1,
      p=2*w()-1;
    s.push({ x: h,y: g,xa: v,ya: p,max: 6000 }); // 每个点都有随机的坐标、速度和最大连接距离
  }
  u=s.concat([y]); // 合并点数组（包含鼠标位置）

  setTimeout(function() {
    i(); // 启动动画绘制
  },100); // 延时启动
}



// 以下是蜘蛛网特效

// !function() {
//     // 获取元素属性的工具函数，若属性不存在则返回默认值
//     function n(n,e,t) {
//         return n.getAttribute(e)||t
//     }
//     // 获取指定标签名的所有 DOM 元素
//     function e(n) {
//         return document.getElementsByTagName(n)
//     }
//     // 获取当前 script 标签的一些配置参数
//     function t() {
//         var t=e("script"),o=t.length,i=t[o-1];  // 获取最后一个 <script> 标签
//         return {
//             l: o, // script 标签的数量
//             z: n(i,"zIndex",-1), // 获取 z-index 属性，默认 -1
//             o: n(i,"opacity",.5), // 获取 opacity 属性，默认 0.5
//             c: n(i,"color","100,0,0"), // 获取 color 属性，默认 "0,0,0"（黑色）
//             n: n(i,"count",99) // 获取 count 属性，默认 99（表示小圆点数量）
//         }
//     }
//     // 更新画布的宽度和高度
//     function o() {
//         a=m.width=window.innerWidth||document.documentElement.clientWidth||document.body.clientWidth,
//             c=m.height=window.innerHeight||document.documentElement.clientHeight||document.body.clientHeight
//     }
//     // 动画绘制函数
//     function i() {
//         r.clearRect(0,0,a,c); // 清空画布
//         var n,e,t,o,m,l;
//         s.forEach(function(i,x) {
//             // 更新每个点的位置
//             for(i.x+=i.xa,i.y+=i.ya,i.xa*=i.x>a||i.x<0? -1:1,i.ya*=i.y>c||i.y<0? -1:1,
//                 r.fillRect(i.x-.5,i.y-.5,1,1),e=x+1;e<u.length;e++) {
//                 n=u[e];
//                 if(null!==n.x&&null!==n.y) {
//                     o=i.x-n.x,m=i.y-n.y; // 计算两点之间的距离
//                     l=o*o+m*m; // 计算平方和（距离的平方）
//                     if(l<n.max) { // 如果距离小于最大距离，连接这两个点
//                         if(n===y&&l>=n.max/2) {
//                             i.x-=.03*o,i.y-=.03*m; // 如果是鼠标的位置，调整点的偏移
//                         }
//                         t=(n.max-l)/n.max; // 计算透明度
//                         r.beginPath();
//                         r.lineWidth=t/2; // 设置线条宽度
//                         r.strokeStyle="rgba("+d.c+","+(t+.2)+")"; // 设置线条颜色和透明度
//                         r.moveTo(i.x,i.y); // 线段起点
//                         r.lineTo(n.x,n.y); // 线段终点
//                         r.stroke(); // 绘制线条
//                     }
//                 }
//             }
//         }),x(i); // 递归调用，持续更新动画
//     }
//     var a,c,u,m=document.createElement("canvas"),d=t(),l="c_n"+d.l,r=m.getContext("2d"),
//         // 获取不同浏览器下的 requestAnimationFrame 方法（用于动画）
//         x=window.requestAnimationFrame||window.webkitRequestAnimationFrame||window.mozRequestAnimationFrame||window.oRequestAnimationFrame||window.msRequestAnimationFrame||function(n) {
//             window.setTimeout(n,1e3/45); // 如果不支持 requestAnimationFrame，使用 setTimeout
//         },
//         w=Math.random,y={ x: null,y: null,max: 2e4 }; // y 记录鼠标的位置以及最大距离

//     m.id=l,m.style.cssText="position:fixed;top:0;left:0;z-index:"+d.z+";opacity:"+d.o; // 设置 canvas 的样式
//     e("body")[0].appendChild(m); // 将 canvas 添加到页面中
//     o(); // 初始化画布的宽高
//     window.onresize=o; // 监听窗口大小变化，重新设置画布大小
//     window.onmousemove=function(n) { // 监听鼠标移动事件
//         n=n||window.event;
//         y.x=n.clientX; // 更新鼠标 x 坐标
//         y.y=n.clientY; // 更新鼠标 y 坐标
//     };
//     window.onmouseout=function() { // 鼠标移出窗口时，清空鼠标位置
//         y.x=null,y.y=null;
//     };
//     // 随机生成一些点
//     for(var s=[],f=0;d.n>f;f++) {
//         var h=w()*a,g=w()*c,v=2*w()-1,p=2*w()-1;
//         s.push({ x: h,y: g,xa: v,ya: p,max: 6e3 }); // 每个点都有随机的坐标、速度和最大连接距离
//     }
//     u=s.concat([y]); // 合并点数组（包含鼠标位置）
//     setTimeout(function() {
//         i() // 启动动画绘制
//     },100); // 延时启动
// }();

// 以上是资质网特效